<template>
  <div class="scrollbox">
    <!-- 头部 -->
    <v-header></v-header>
    <div class="dis10"></div>
    <div class="listbox aps9">
      <v-list
        api="user.get_user_list"
        ref="list"
        cards="1"
        cols="100,100,200,140,200,200,150,150, 150"
        :params="params"
      >
        <template slot="search">
          <el-button
            class="operate"
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="edit(params)"
          >创建账号</el-button>&nbsp;&nbsp;&nbsp;
          <el-button
            :loading="loading"
            class="operate fr"
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="addTemp"
          >同步临时会员信息</el-button>
          <!-- <span class="fr"></span> -->
        </template>
        <template slot="head" slot-scope="props">
          <thead>
            <tr class="tr">
              <th class="c1">姓名</th>
              <th>阿里用户ID</th>
              <th>账号</th>
              <th>手机</th>
              <th>邮箱</th>
              <th>备注</th>
              <th>
                注册时间
                <i
                  :class="props.filter.orderby == 'a.regdateline|desc' ? 'el-icon-arrow-up': 'el-icon-arrow-down'"
                  @click.stop="$refs.list.setOrderby('regdateline','a')"
                ></i>
              </th>
              <th>
                登录时间
                <i
                  :class="props.filter.orderby == 'a.logdateline|desc' ? 'el-icon-arrow-up': 'el-icon-arrow-down'"
                  @click.stop="$refs.list.setOrderby('logdateline','a')"
                ></i>
              </th>
              <th>操作</th>
            </tr>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr>
            <td class="font-blue" @click="setBaseInfo(props.item)">
              <a href="javascript:void(0)" class="font-blue f14">
                <span v-if="!props.item.realname">-</span>
                <i
                  class="fa fa-user font-green"
                  :title="props.item.online?'在线':'离线'"
                  :class="{'online':props.item.online,'outline':!props.item.online}"
                  v-if="props.item.online"
                ></i>
                {{ props.item.realname }}
                <span
                  class="font-gray2 f11"
                >({{ props.item.uid }})</span>
                <span
                  v-if="props.item.inlock > 0"
                  class="fa fa-lock"
                  style="font-size: 12px;color:gold"
                ></span>
              </a>
            </td>
            <td class="font-gray2">{{ props.item.user_id || '-' }}</td>
            <td class="font-gray2">
              <span v-if="!props.item.uname">-</span>
              {{props.item.uname}}
            </td>
            <td class="font-gray2">
              <span v-if="!props.item.mobile">-</span>
              {{props.item.mobile}}
            </td>
            <td class="font-gray2">
              <span v-if="!props.item.email">-</span>
              {{props.item.email}}
            </td>
            <td class="font-gray2">
              <span v-if="!props.item.remark">-</span>
              {{props.item.remark}}
            </td>
            <td class="font-gray2">{{props.item.regdateline | dateFormat("yyyy-MM-dd HH:mm")}}</td>
            <td>{{props.item.logdateline | dateFormat("yyyy-MM-dd HH:mm")}}</td>
            <td>
              <el-button
                size="mini"
                title="编辑"
                icon="el-icon-edit"
                type="primary"
                circle
                @click="edit(props.item)"
              ></el-button>
              <el-button
                v-if="props.item.uid"
                size="mini"
                title="清除缓存"
                icon="el-icon-coin"
                type="default"
                circle
                @click="clear(props.item)"
              ></el-button>
              <!-- <el-button
                v-if="!['cate','type','module'].some(el=> {return el===props.item.name})"
                size="mini"
                title="删除"
                type="default"
                icon="el-icon-delete"
                circle
                @click="del(props.item)"
              ></el-button>-->
            </td>
          </tr>
        </template>
      </v-list>
    </div>

    <!-- 编辑 -->
    <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
      <div class="dialogform">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          label-position="right"
          class="demo-ruleForm"
        >
          <el-form-item label="联盟" prop="union_id">
            <!-- <el-input :disabled="form.union_id > 0" v-model="form.union_id" class="w200"></el-input> -->
            <el-select v-model="form.union_id" v-if="this.editData.id === 0" class="w200">
              <el-option
                :value="item.union_id"
                :label="item.name"
                v-for="(item, index) in menu"
                :key="index"
              ></el-option>
            </el-select>
            <el-input v-else v-model="form.union_id" disabled class="w200"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="form.uname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="upass" v-if="this.editData.id === 0">
            <el-input v-model="form.upass" type="password"></el-input>
          </el-form-item>
          <el-form-item label="密码" v-else>
            <el-input v-model="form.upass" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.realname" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="阿里用户ID">
            <el-input v-model="form.user_id" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="权限ID">
            <!-- <el-input v-model="form.purview_sys" class="w200"></el-input> -->
            <el-select v-model="form.purview_sys" class="w200">
              <el-option
                :value="item.id"
                :label="item.name"
                v-for="(item, index) in purMenu"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否锁定">
            <el-radio-group v-model="form.inlock">
              <el-radio :label="1">锁定</el-radio>
              <el-radio :label="0">正常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item label prop="inlock">
            <el-button type="primary" @click="save">保 存</el-button>
            <el-button @click="editData.status = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="tc"></div>
    </el-dialog>
    <!-- 编辑结束 -->
    <!-- 详情开始 -->
    <v-baseinfo v-model="drawer.show" :name="drawer.name">
      <div class="wrapper-content" v-if="drawer.data" slot="user/list">
        <div class="content-item">
          <span class="label">联盟编码：</span>
          <span class="value">{{drawer.data.union_id || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">UID：</span>
          <span class="value">{{drawer.data.uid || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">邮箱：</span>
          <span class="value">{{drawer.data.email || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">手机：</span>
          <span class="value">{{drawer.data.mobile || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">姓名：</span>
          <span class="value">{{drawer.data.realname || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">系统角色：</span>
          <span class="value">{{drawer.data.purview_sys_name || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">阿里用户ID：</span>
          <span class="value">{{drawer.data.user_id || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">注册IP：</span>
          <span class="value">{{drawer.data.regip || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">注册时间：</span>
          <span class="value">{{drawer.data.regdateline | dateFormat('yyyy-MM-dd HH:mm:ss')}}</span>
        </div>
        <div class="content-item">
          <span class="label">登录IP：</span>
          <span class="value">{{drawer.data.logip || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">登陆时间：</span>
          <span class="value">{{drawer.data.logdateline | dateFormat('yyyy-MM-dd HH:mm:ss')}}</span>
        </div>
        <div class="content-item">
          <span class="label">登陆次数：</span>
          <span class="value">{{drawer.data.logtimes || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">是否锁定：</span>
          <span class="value font-green" v-if="!drawer.data.inlock">正常</span>
          <span class="value font-red" v-else>锁定</span>
        </div>
        <div class="content-item">
          <span class="label">备注：</span>
          <span class="value">{{drawer.data.label || '-'}}</span>
        </div>
      </div>
    </v-baseinfo>
    <!-- 详情结束 -->
  </div>
</template>
<script>
import { cacheUnion, cacheConfig } from "@cache";
export default {
  data() {
    return {
      form: {
        uid: "",
        user_id: "",
        uname: "",
        upass: "",
        email: "",
        mobile: "",
        realname: "",
        purview_sys: "",
        inlock: 0,
        union_id: "",
        remark: ""
      },
      editData: {
        status: false,
        title: "新增/修改会员信息",
        id: 0
      },
      rules: {
        union_id: [
          {
            type: "string",
            required: true,
            message: "请输入联盟编码",
            trigger: "blur"
          },
          { min: 1, message: "联盟编码不能为空", trigger: "blur" }
        ],
        upass: [
          {
            type: "string",
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          { min: 1, message: "密码不能为空", trigger: "blur" }
        ]
      },
      params: {},
      drawer: {
        show: false,
        data: {},
        name: "会员管理"
      },
      menu: [],
      purMenu: [],
      loading: false
    };
  },
  watch: {
    "drawer.show": {
      handler(newV) {
        if (!newV) {
          this.drawer.data = null;
          this.purMenu = [];
        }
      }
    }
  },
  methods: {
    edit(item) {
      this.editData.status = true;
      this.editData.id = item.uid || 0;
      this.form.uid = item.uid || "";
      this.form.union_id = item.union_id || "";
      this.form.uname = item.uname || "";
      this.form.remark = item.remark || "";
      this.form.upass = item.upass || "";
      this.form.email = item.email || "";
      this.form.mobile = item.mobile || "";
      this.form.realname = item.realname || "";
      this.form.user_id = item.user_id || "";
      this.form.purview_sys = item.purview_sys || "";
      this.form.inlock = item.inlock || 0;
    },
    clear(item) {
      this.$api.jget("system.del_user_cache", { uid: item.uid }).then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
        }
      });
    },
    save() {
      let that = this;
      that.$refs["form"].validate(valid => {
        if (valid) {
          let url = that.editData.id > 0 ? "user.edit_user" : "user.add_user";
          that.$api.jpost(url, that.form).then(res => {
            if (res.status === 1) {
              this.$success(res.msg);
              that.$refs.list.fetchData();
              that.editData.status = false;
            } else {
              that.$error(res.msg);
            }
          });
        }
      });
    },
    // 刷新缓存
    refresh() {
      this.$api.get("system.refresh_sys_union").then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
          this.$refs.list.fetchData();
        }
      });
    },
    del(row) {
      let that = this;
      that
        .$confirm("此操作会将该彻底删除，不可恢复, 是否继续?", "删除提醒")
        .then(() => {
          that.$api
            .post("system.delete_sys_union", { id: row.id })
            .then(res => {
              if (res.status === 1) {
                that.$success(res.msg);
                that.$refs.list.fetchData();
              } else {
                that.$error(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    setBaseInfo(item) {
      this.$api.get("user.get_user_detail", { uid: item.uid }).then(res => {
        this.drawer.data = res.data;
      });
      this.drawer.show = true;
    },
    getPurview() {
      this.$api
        .jget("system.get_sys_purview", {
          type: "sys",
          union_id: "SYS"
        })
        .then(res => {
          if (res.status === 1) {
            this.purMenu = res.data;
          } else {
            this.$error(res.msg);
          }
        });
    },
    addTemp() {
      this.loading = true;
      this.$api.jget("user.add_user_by_tmp").then(res => {
        if (res.status === 1) {
          this.params = {
            page: 1
          };
          this.loading = false;
          this.$success(res.msg);
        } else {
          this.$error(res.msg);
        }
      });
    }
  },
  mounted() {
    this.menu = cacheUnion.load("YY:union");
    this.getPurview();
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 290px;
}
</style>
